<template>
	<view>
		<!-- 头部 -->
		<MyHeader v-if="flag"></MyHeader>
		<!-- 发表推荐 -->
		<!-- <view class="publish" v-show="flag" @click="publish()">
		<uni-icons color="#fff" size="30" type="plusempty"></uni-icons>
		
		</view> -->
		<Home v-if="flag"></Home>
		<view v-if="flag" class="padding bg-white">
			<view class="flex">
				<view class="flex-sub text-center" @click="filter()">
					<view class=" text-xxl ">
						<text class=" cuIcon-share text-gray"></text>
					</view>
					<view class="padding" style="margin-top: -30rpx;">随机美食</view>
				</view>
				<view class="flex-sub text-center" @click="publish()">
					<view class=" text-xxl ">
						<text class=" cuIcon-emoji text-gray"></text>
					</view>
					<view class="padding" style="margin-top: -30rpx;">发布美食</view>
				</view>
			</view>
		</view>
		<!-- 瀑布流 -->
		<WaterFall  :key="componentKey" v-if="flag" :list="list" ></WaterFall>
		<!-- 搜索页 -->
		<!-- <Search v-else></Search> -->
	</view>
</template>

<script>
	import Home from '@/components/Home.vue'
	import MyHeader from '@/components/MyHeader.vue'
	import WaterFall from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue'
	import Search from '@/components/Search.vue'
	//const data = require('@/common/json/data.json');
	export default {
		data() {
			return {
				componentKey: 0,
				flag: true,
				page: 1,
				start: 0,
				end: 0,
				list: [], // 列表
				data: [],
			}
		},
		components: {
			MyHeader,
			WaterFall,
			Search,
			Home
		},
		onReady() {
			let _this = this;
			//搜索页的显示与关闭
			uni.$on("changeFlag", function(arg) {
					_this.flag = arg
				}),
				uni.$on("back", function(arg) {
					_this.flag = arg
					_this.getList()
				})
		},
		onLoad() {
			this.componentKey++
			//获取瀑布流列表
			uniCloud.callFunction({
				name: "getNews",
				data: {
					name: "Tweets"
				}
			}).then(res => {
				console.log(res)
				this.data = res.result.data;
				this.data.reverse()
				// //console.log(this.data)
				this.getList()
			})
			//this.getList();
		},
		
		onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			//发表美食推荐
			publish() {
				let openid = uni.getStorageSync('openid')
				if (openid.length == 0)
				this.$uniLogin.getUserProfile()
				else {
					uni.navigateTo({
						url: "/pages/publish_recommend/index"
					})
				}
				
			},
			//筛选美食
			filter() {
				let openid = uni.getStorageSync('openid')
				if (openid.length == 0)
				this.$uniLogin.getUserProfile()
				else{
					uni.navigateTo({
						url:"/pages/filter/index"
					})
				}
				
			},
			// 模拟加载数据
			getList() {
				if (this.list.length < this.data.length) {
					uni.showLoading({
						title: '加载中...'
					})
					setTimeout(() => {
						
						this.end = this.page * 10;
						this.list = this.list.concat(this.data.slice(this.start, this.end));
						this.start = this.end;
						//this.componentKey++
						uni.hideLoading();
					}, 1000)
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/home/index"
						})
						// uni.navigateBack({
						// delta: 0,
						// });
						uni.stopPullDownRefresh()
					},1000)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.publish {
		position: absolute;
		right: 80rpx;
		top: 20rpx;
		border: 1px solid black;
		padding: 0;
		border-radius: 50%;
		background-color: #FB8817;
		z-index: 999;
	}
</style>
